﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>绑定账号</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/a3common.css" rel="stylesheet">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/font_43459_lbtux0zjkr6yldi.css">

    <!-- 引入组件库 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <script src="js/vue.js"></script>
    <script src="plugins/elementui/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
    <div id="main" class="main-warp">
        <div class="main-content">
            <div class="formDiv">
                    <h2 class="text-center">绑定账号</h2>
                <form id="loginForm" method="post">
                    <div class="dataform" >
                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-yonghu1"></span>
                            <input id="userName" name="username" v-model="userLoginDTO.account" type="text" class="inputs" placeholder="手机号码或邮箱" maxlength="64">
                        </div>
                        <div class="error-content">
                            <span id="userNameErr" class="errMsg"></span>
                        </div>

                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-baomi"></span>
                            <input class="inputs" type="password" v-model="userLoginDTO.password" name="password" placeholder="密码" id="pwd" maxlength="20">
                        </div>
                        <div class="error-content">
                            <span id="passwordErr" class="errMsg"></span>
                        </div>

                        <div class="btn-warp gap">
                            <div class="text-center">
                                <input type="hidden" value="jsform" id="_app"/>
                                <button @click="handleLogin" type="button" id="btnLogin" class="btn btn-block lgbtn blue">登录</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">

    function getQueryParam(name) {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        return urlParams.get(name);
    }

    let vue = new Vue({
        el: "#main",
        data: {
            userLoginDTO: {openId: ''}
        },
        methods: {
            // 登录
            handleLogin(){
                // 获取请求地址栏的openId
                let openId = getQueryParam("openId");
                console.log("获取地址栏中的openId为：" + openId)
                this.userLoginDTO.openId = openId;
                axios.post("/user/login", this.userLoginDTO).then(res => {
                    if(res.data.code == 20000){// 登录成功。跳转页面
                        location.href = "/pages/main.html";
                    }else{
                        this.$message.error(res.data.message);
                    }
                });
            }
        }
    });
</script>
